<template>
  <div class="article-draft">
    <div class="article-draft__list">
      <div class="list-head">
        <ul>
          <li>文章草稿 ({{ articleDraftList?.length }})</li>
        </ul>
      </div>

      <article-draft-card v-for="i in articleDraftList" :articleDraft="i"></article-draft-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import ArticleDraftCard from './components/ArticleDraftCard.vue'

import { articleUserDraftCard } from '/@/api/article/articleCard'

const articleDraft = {
  articleId: 1, // 文章ID
  pushDate: '1649326613000', // 发布时间

  title: '', // 文章题目
  articleSummary: '', // 文章摘要
  articleImg: '' // 文章封面
}

let articleDraftList = ref<Array<any>>()

onMounted(() => {
  articleUserDraftCard(localStorage.getItem('userId') ?? '-1').then((res) => {
    articleDraftList.value = res.data
    console.log(articleDraftList.value?.length);
  })
})
</script>

<style lang="scss" scoped>
.article-draft {
  width: 100%;

  min-width: 820px;
  min-height: 100%;
  background-color: #f1f2f9;

  display: flex;

  justify-content: center;

  .article-draft__list {
    width: 616px;
    margin-top: 20px;

    .list-head {
      width: 100%;
      height: 46px;
      background-color: white;
      ul {
        display: flex;

        height: 100%;

        align-items: center;

        li {
          padding: 0 1rem;
          /*text-align: center;*/
          flex-shrink: 0;
          box-sizing: border-box;

          color: #909090;

          border-right: 1px solid #eaeaea;

          font-size: 0.9rem;

          user-select: none;

          cursor: pointer;

          &:hover {
            color: #007fff;
          }

          &:first-child {
            color: #007fff;
          }

          &:last-child {
            border-right: 0;
          }
        }
      }
    }
  }
}
</style>
